<template>
  <div class="card">
    <div class="image-container">
      <img :src="cardData.image" alt="Image" class="image"/>
    </div>
   <div class="info-container">
  <h2>{{ cardData.name }}</h2>
  <p>特色：{{ cardData.mainly }}</p>
  <ul>
    <li v-for="dish in cardData.dishes" :key="dish.id">{{ dish.name }}</li>
  </ul>
</div>
  </div>
</template>

<script>
export default {
  name: "Card",
  props: {
    cardData: {
      type: Object,
      required: true,
    },
  },
}

</script>

<style scoped>

.image{
  width: 200px; /* 设置宽度 */
  height: 180px; /* 设置高度 */
  margin-left: 20px;
  margin-top: 10px;
  object-fit: contain;
}
.card {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 20px;
  margin-left: 100px;
  margin-right: 100px;
}

img {
  width: 100%;
  height: auto;
}

.info-container {
  padding: 10px;
  width: 70%;
}

h2 {
  margin-bottom: 5px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 5px;
}
</style>